
import * as React from 'react';

import { Layout, Menu, Avatar, Button, Icon, Popover, Card, Typography} from 'antd';
import {IconLogo, Avataar}from '../../assets'
const { Header, Sider, } = Layout;
import SearchBar from '../../components/SearchBar';
import { menu } from '../../Router';
import { history } from '../../Utils';
import QueueAnim from 'rc-queue-anim';

import style from './index.less'
import { relative } from 'path';

interface Props{
   style?: object 
   header?: any
}

class MenuWrapper extends React.Component<Props> {
    state = {
      collapsed: false,
      showDrawer: false,
      current: history.location.pathname
    }
    static defaultProps ={
      style: {}
    }
    public render () {
      
        return (<Layout style={{height: '100vh', background:"#2e6ed2", overflow: 'hidden'}}>
        <Header className={style.header}>
          <img src={IconLogo} style={{width: 138,marginLeft: 20, marginRight: 130,}}/>
          <SearchBar />
          <div style={{float: "right", height:80, minWidth: 100, textAlign: "right", marginRight: 10}}>
            <div className={style.iconGroup}>
              <Icon type="contacts" onClick={() => {
                history.push('/contact')
              }}/>
              <Icon type="setting"/>
              <Icon type="bell"   />
            </div>
            <Popover
              overlayStyle={{padding:0}}
              content={
                <Card bordered={false} bodyStyle={{padding:0}}>
                  <h3>Abigail Xiong</h3>
                  <Typography.Paragraph copyable>abigailxiong@qq.com</Typography.Paragraph>
                </Card>
              }
            >
              <Avatar style={{ width: 50, height:50}} src={Avataar} />
            </Popover>
          </div>
          
        </Header>
        <Layout style={{background: 'none',padding:"10px 0 0 0 "}}>
          <Sider 
            key="1"
            width={270} 
            style={{ background: '#fff', paddingTop: 110, position: 'relative'}}
          >
            <Button 
                type="primary" 
                key="1"
                onClick={() => this.setState({showDrawer: true})} 
                size="large" 
                shape="round" 
                style={{margin: '10px 10px 20px 10px', height:60, width:156, lineHeight:'60px', position: 'absolute', top: 20}}>
                <span style={{marginRight:40, fontSize: 22}}>
                  <Icon type="plus-circle" theme="filled" style={{fontSize: 34, marginRight:10, marginLeft:-5, marginTop:-5, verticalAlign: 'middle'}}/>
                  写邮件
                </span>
            </Button>
            <QueueAnim
            animConfig={[
              { translateX: [0, -20] },
            ]}
              component={Menu}
              componentProps= {{
                mode: "inline",
                className: style.menu,
                defaultSelectedKeys :[this.state.current],
                onSelect: (e) => {
                  history.push(e.key)
                },
                style: { height: '100%', borderRight: 0 }
              }}
            > 
              {
                menu.map(item => {
                  return <Menu.Item key={item.key}> 
                    <Icon type={item.icon} style={{ fontSize: 18, marginRight: 20}} />
                    {item.title}
                    <small style={{float:"right"}}>55</small>
                  </Menu.Item>  
                })
              }
            {/* </Menu> */}
            </QueueAnim>
          </Sider>
          {this.props.children}
        </Layout>
      </Layout>)
    }
}
export default MenuWrapper